<template>
  <div>
    <div class="breadcrumb-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="changePwd container">
      <left-nav-bar :active="active"></left-nav-bar>
      <div class="right">
        <div class="line-ti">
          <div>修改密码</div>
        </div>
        <div style="height:74px;"></div>
        <div class="input-pwd">
          <div class="li">
            <div class="form-mobile">当前手机号: {{phone}}</div>
          </div>
          <div class="li">
            <div>新密码</div>
            <input type="password" placeholder="请输入密码" v-model="password1" />
          </div>
          <div class="li">
            <div>确认密码</div>
            <input type="password" placeholder="请输入密码" v-model="password2" />
          </div>
          <div class="li">
            <div>验证码</div>
            <input type="text" placeholder="请输入验证码" v-model="captcha" class="li-du" />
            <div v-if="disabled">{{text}}</div>
            <div v-else @click="code">{{text}}</div>
          </div>
          <div class="li" v-if="isShowCode">
            <div>验证码</div>
            <input type="text" placeholder="请输入验证码" v-model="codeVal" class="li-du" />
            <div @click="again">
              <img src="codeUrl" />
            </div>
          </div>
        </div>
        <div class="pwd-but">
          <el-button class="btn-r" @click="confirm">确认修改</el-button>
        </div>
      </div>
    </div>
    <div style="height: 200px"></div>
  </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import sendVerifyCode from "@mixins/SendVerifyCode";
import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import {
  registerReset,
  registerVerify,
  getUserInfo,
  getCodeApi
} from "@api/user";
import { VUE_APP_API_URL } from "@utils";

export default {
  name: "ChangePassword",
  components: {
    leftNavBar
  },
  props: {},
  data() {
    return {
      active: 9,
      password1: "",
      password2: "",
      captcha: "",
      phone: "", //隐藏几位数的手机号；
      yphone: "", //手机号；
      keyCode: "",
      codeUrl: "",
      codeVal: "",
      isShowCode: false
    };
  },
  mixins: [sendVerifyCode],
  // computed: mapGetters(["userInfo"]),
  mounted() {
    this.getCode();
    this.getUserInfo();
  },
  methods: {
    again() {
      this.codeUrl =
        VUE_APP_API_URL +
        "/sms_captcha?" +
        "key=" +
        this.keyCode +
        Date.parse(new Date());
    },
    getCode() {
      getCodeApi()
        .then(res => {
          this.keyCode = res.data.key;
        })
        .catch(res => {
          this.$dialog.error(res.msg);
        });
    },
    getUserInfo() {
      let that = this;
      getUserInfo().then(res => {
        that.yphone = res.data.phone;
        let reg = /^(\d{3})\d*(\d{4})$/;
        that.phone = that.yphone.replace(reg, "$1****$2");
      });
    },
    async confirm() {
      let that = this;
      const { password1, password2, captcha, codeVal } = that;
      try {
        await that
          .$validator({
            password1: [
              required(required.message("密码")),
              attrs.range([6, 16], attrs.range.message("密码")),
              alpha_num(alpha_num.message("密码"))
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ],
            codeVal: this.isShowCode
              ? [
                  required(required.message("验证码")),
                  attrs.length(4, attrs.length.message("验证码")),
                  alpha_num(alpha_num.message("验证码"))
                ]
              : []
          })
          .validate({ password1, captcha, codeVal });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      if (password1 !== password2) return that.$dialog.error("两次密码不一致");
      registerReset({
        account: that.yphone,
        captcha: that.captcha,
        password: that.password1,
        code: that.codeVal
      })
        .then(res => {
          that.$dialog.success(res.msg).then(() => {
            localStorage.clear()
            that.$router.replace('/login');
          });
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    async code() {
      let that = this;
      const { yphone, codeVal } = that;
      try {
        await that
          .$validator({
            yphone: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ]
          })
          .validate({ yphone, codeVal });
      } catch (e) {
        return validatorDefaultCatch(e);
      }

      registerVerify({ phone: yphone, key: that.keyCode, code: that.codeVal })
        .then(res => {
          that.$dialog.success(res.msg);
          that.sendCode();
        })
        .catch(res => {
          if (res.data.status === 402) {
            that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
            that.isShowCode = true;
          }
          that.$dialog.error(res.msg);
        });
    }
  }
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #DA213D;
.changePwd {
  /*width: 70%;*/
  margin: 0 auto;
  display: flex;
  .right {
    width: 1000px;
    margin-left: 32px;
    .line-ti {
      width: 100%;
      border-bottom: 1px solid #dbdbdb;
      > div {
        color: #DA213D;
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold;
        border-bottom: 3px solid $color;
        width: 90px;
        line-height: 36px;
        font-weight: 600;
        text-align: center;
      }
    }
    .input-pwd {
      .form-mobile {
        padding-left: 116px;
        width: 470px !important;
        text-align: center !important;
      }
      .li {
        display: flex;
        height: 40px;
        align-items: center;
        margin-bottom: 24px;
        > div:nth-of-type(1) {
          width: 100px;
          text-align: right;
          font-size: 16px;
          color: #666666;
        }
        input {
          width: 450px;
          height: 40px;
          border-radius: 4px;
          border: 1px solid rgba(217, 217, 217, 1);
          font-size: 14px;
          padding-left: 16px;
          border-radius: 4px;
          margin-left: 16px;
        }
        input::-webkit-input-placeholder {
          color: #000000;
          opacity: 0.25;
        }
        .li-du {
          width: 338px;
        }
        > div:nth-of-type(2) {
          width: 96px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-radius: 2px;
          border: 1px solid #DA213D;
          font-size: 14px;
          color: #DA213D;
          margin-left: 16px;
          cursor: pointer;
        }
      }
    }
    .pwd-but {
      margin: 40px 0 0 116px;
      .btn-r{
        color: #fff !important;
      }
    }
  }
}
</style>
